<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4609712_7gqf9r9eyn8.css">
    <title>Document</title>
</head>
<style>
    #app{
        width: 800px;
        height: 500px;
        border: 1px solid red;
    }
    .a{
        background-color: aliceblue;
    margin: 10px 0;
        
    }
    .xx{
        display: flex;
    }
    .c{
        text-align: center;
        margin-left:20px ;
        width: 100px;
        border: 1px solid #ccc;
    }
    .red{
        color: red;
    }
    .biankuang{
        border-color: red;
    }
</style>
<body>
    <div id="app">
<p>给“新闻订单”的评价</p>
<hr>
<p>请严肃认真对待此次评价哦！您的评价对我们真的真的非常重要！</p>
<div class="tu">
<span class="iconfont icon-star" @mouseover="a=1" @mouseout="a=0" @click="a1=1" :class="{red:a1>=1 || a>=1}"></span>
<span class="iconfont icon-star" @mouseover="a=2" @mouseout="a=0" @click="a1=2" :class="{red:a1>=2 || a>=2}"></span>
<span class="iconfont icon-star" @mouseover="a=3" @mouseout="a=0" @click="a1=3" :class="{red:a1>=3 || a>=3}"></span>
<span class="iconfont icon-star" @mouseover="a=4" @mouseout="a=0" @click="a1=4" :class="{red:a1>=4 || a>=4}"></span>
<span class="iconfont icon-star" @mouseover="a=5" @mouseout="a=0" @click="a1=5" :class="{red:a1>=5 || a>=5}"></span>
<span v-show="a===1||a1===1">差评</span>
<span v-show="a===2||a1===2">较差</span>
<span v-show="a===3||a1===3">中等</span>
<span v-show="a===4||a1===4">一般</span>
<span v-show="a===5||a1===5">好评</span>
</div>
<div class="a">
<p>本次交易，乖，摸摸头 给您留下了什么印象呢？</p>
</div>
<div class="xx">
    <div class="c" @click="b=!b" :class="{biankuang:b===true}">专业水平高</div>
    <div class="c" @click="c=!c" :class="{biankuang:c===true}">交付准时</div>
    <div class="c" @click="d=!d" :class="{biankuang:d===true}">效果明显</div>
    <div class="c" @click="e=!e" :class="{biankuang:e===true}">数据分析准确</div>
    <div class="c" @click="f=!f" :class="{biankuang:f===true}">能力待提高</div>
    <div class="c" @click="g=!g" :class="{biankuang:g===true}">工期延误</div>
</div>
<div style="width: 600px; height: 200px; margin: auto;">
<textarea style="width: 600px; height: 200px;" type="text" maxlength="140" v-model="qw"></textarea>
<span>还可以输出{{140-qw.length}}字</span>
</div>
<div>
    <button @click="j=!j">评价完成</button>
    <div v-show="j">感谢您的评价！么么哒</div>
</div>
    </div>
   
</body>
<script src="./vue.js"></script>
<script>
const {createApp,ref}=Vue
const app=createApp({
    setup(){
        // let res=ref(['专业水平高','交付准时','效果明显','数据分析明确','能力待提高','工期延误'])
        let a=ref(0)
        let a1=ref(0)
        let color=ref('red')
        let biankuang=ref('red')
        let b=ref(false)
        let c=ref(false)
        let d=ref(false)
        let e=ref(false)
        let f=ref(false)
        let g=ref(false)
        let qw=ref('')
        let j=ref(0)
        return{
a,a1,
color,
b,c,d,e,f,g,qw,j
        }
    }
}).mount('#app')
</script>
</html>